<template>
  <el-form inline :model="temp" :rules="rules" ref="form" label-width="80px">
    <el-row class="account__edit__form__row">
      <el-form-item label="用户名" prop="username">
        <el-input size="small" v-model="temp.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" v-if="!temp.pkId" prop="password">
        <el-input size="small" v-model="temp.password"></el-input>
      </el-form-item>
    </el-row>
    <el-row class="account__edit__form__row">
      <el-form-item label="姓名" prop="name">
        <el-input size="small" v-model="temp.name"></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="roleId">
        <el-select size="small" v-model="temp.roleId" filterable placeholder="请选择">
          <el-option v-for="item in roleList" :key="item.pkId"
                     :label="item.noteDesc" :value="item.pkId">
            <span style="float: left">{{ item.noteDesc }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>
    </el-row>
    <el-row class="account__edit__form__row">
      <el-form-item label="邮箱">
        <el-input size="small" v-model="temp.email"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input size="small" v-model="temp.phone"></el-input>
      </el-form-item>
    </el-row>
    <el-row class="account__edit__form__row">
      <el-form-item label="性别">
        <dict-select v-model="temp.gender" type="gender"></dict-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input size="small" v-model="temp.age"></el-input>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
import TempMixin from "@/mixins/TempMixin";
import {page as rolePage} from '@/api/role'
import {DictSelect} from '@/components/Form'

export default {
  components: {DictSelect},
  mixins: [TempMixin],
  data() {
    return {
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        roleId: [
          {required: true, message: '请选择角色', trigger: 'change'},
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
        ],
      },
      roleList: []
    }
  },
  component: {},
  computed: {},
  watch: {},
  methods: {
    listRole() {
      rolePage({pageNum: 1, pageSize: 999999}).then(res => {
        this.roleList = res.result.records
      })
    }
  },
  mounted() {
    this.listRole()
  }
}
</script>

<style lang="scss">
.account__edit__form__row {
  display: flex;
  justify-content: space-between;

  .el-form-item {
    width: 100%;

    &__content {
      width: calc(100% - 80px);

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
